<template>
  <div class="mine">
    <navbar>
      <div slot="center">我的</div>
    </navbar>
    <!--设置部分-->
    <div class="mine1">
      <router-link to="shez">
        <img src="../../../assets/设 置.png" />
      </router-link>
    </div>
    <!--头像部分-->
    <div class="mine2">
      <div class="toux">
        <router-link to="zil">
          <div class="toux1">
            <img src="../../../assets/1.jpg" />
          </div>
          <div class="toux2">
            <span>地对地导弹</span>
          </div>
          <div class="toux3">
            <span>资料完整度 78%</span>
          </div>
        </router-link>
      </div>
    </div>
    <!--照片展示-->
    <div class="mine3">
      <ul class="mine3-ul">
        <li
            v-for="(item, index) in showImgsrc"
            :key="index"
            class="mine3-li"
          >
            <img :src="item" alt="" />
            <span class="mine3-span" @click="clearImg(index)">X</span>
          </li>
          <div class="mine3-div1">
          <li v-if="showImgsrc.length < 9" class="mine3-li1">
            <input type="file" @change="uploadImg($event)" />
          </li>
          </div>
          <span class="mine3-span1"
              >已上传（{{ showImgsrc.length }}/9）</span
            >
      </ul>
    </div>
    <!--会员部分-->
    <div class="mine4">
      <div class="huiy">
        <router-link to="member3">
          <span class="huiy1">会员服务</span>
          <span class="huiy2">全部<img src="../../../assets/3.svg" /></span>
        </router-link>
      </div>
      <div class="huiy3">
        <ul>
          <li>
            <router-link to="member">
              <img src="../../../assets/huiyfw/1.jpg" />
              <span>钻石会员</span>
            </router-link>
          </li>
          <li>
            <router-link to="member1">
              <img src="../../../assets/huiyfw/2.jpg" />
              <span>高级会员</span>
            </router-link>
          </li>
          <li>
            <router-link to="member2">
              <img src="../../../assets/huiyfw/3.jpg" />
              <span>红娘会员</span>
            </router-link>
          </li>
          <li>
            <router-link to="member3">
              <img src="../../../assets/huiyfw/4.jpg" />
              <span>会员服务</span>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <!--功能部分-->
    <div class="function">
      <ul class="function1">
        <li class="function1-li">
          <router-link to="J5-5-1">
            <span class="text">时尚秀</span>
            <span class="text1"><img src="../../../assets/3.svg" /></span>
          </router-link>
        </li>
        <li>
          <router-link to="j5-6">
            <span class="text">奢侈品秀</span>
            <span class="text1"><img src="../../../assets/3.svg" /></span>
          </router-link>
        </li>
        <li>
          <router-link to="j5-8">
            <span class="text">我的留言</span>
            <span class="text1"><img src="../../../assets/3.svg" /></span>
          </router-link>
        </li>
        <li>
          <router-link to="friends">
            <span class="text">我的好友</span>
            <span class="text1"><img src="../../../assets/3.svg" /></span>
          </router-link>
        </li>
        <li>
          <router-link to="news">
            <span class="text">谁看过我</span>
            <span class="text1"><img src="../../../assets/3.svg" /></span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import navbar from "../../../components/navbar/navbar";
export default {
  name: 'mine',
  components: {
    navbar
  },
  data () {
    return {
      showImgsrc: []
    }
  },
  methods: {
    uploadImg (e) {
      const that = this
      const imgFiles = e.target.files
      console.log(e.target.files.length)
      if (e.target.files.length + that.showImgsrc.length >= 10) {
        this.showDialog = true
        this.contentText = '您最多只能上传9张图片，请重新上传！'
      } else {
        for (var i = 0; i < imgFiles.length; i++) {
          var fr = new FileReader()
          fr.onload = function () {
            that.showImgsrc.push(this.result)
          }
          fr.readAsDataURL(imgFiles[i]) // 读取文件
        }
      }
    },
    clearImg (index) {
      this.showImgsrc.splice(index, 1)
    }
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.mine {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  height: calc(100vh - 55px);
  overflow-y: scroll;
  background-color: #f3f3f3;
}
/*设置部分*/
.mine1 {
  width: 100%;
  height: 43px;
  margin-top: 50px;
}
.mine1 img {
  width: 30px;
  height: 30px;
  float: right;
  margin: 5px 10px 0 0;
}
/*头像部分*/
.mine2 {
  height: 150px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.mine2 .toux a {
  text-decoration: none;
}
.mine2 .toux1 img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #cecece;
}
.mine2 .toux2 span {
  color: #000;
  font-size: 18px;
  font-weight: 900;
}
.mine2 .toux3 span {
  color: #696969;
  font-size: 16px;
}
/*照片展示*/
.mine3 {
  height: 85px;
  background-color: #fff;
  border-top: 1px solid #383838;
  border-bottom: 1px solid #383838;
  display: flex;
  align-items: center;
}
.mine3-ul {
  width: 100%;
  height: 70px;
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
}
.mine3 ul li {
  display: inline-block;
  margin-left: 10px;
}
.mine3 img {
  width: 70px;
  height: 70px;
  border-radius: 20%;
}
.mine3-li {
  display: inline-block;
  margin-left: 10px;
  width: 70px;
  height: 70px;
  position: relative;
}
.mine3-span {
  position: absolute;
  top: 0;
  right: 0;
  background: #df0615;
  color: #ffffff;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 30px;
}
.mine3-div1 {
  width: 60px;
  height: 60px;
  background-image: url('../../../assets/1.svg');
  background-size: 60px 60px;
  background-repeat:no-repeat;
  border-radius: 20%;
  margin-top: 5px;
  margin-left: 10px;
}
.mine3-li1 {
  opacity: 0;
}
.mine3-li1 input {
  width: 70px;
  height: 70px;
}
.mine3-span1 {
  line-height: 70px;
  font-size: 16px;
  color: red;
  margin-left: 10px;
}
/*会员部分*/
.mine4 {
  height: 130px;
}
.mine4 a {
  text-decoration: none;
  font-size: 16px;
  color: #000;
}
.mine4 .huiy {
  height: 30px;
}
.mine4 .huiy a span {
  width: 70px;
  height: 30px;
  margin-left: 10px;
  display: block;
  text-align: center;
  line-height: 30px;
}
.mine4 .huiy a .huiy1 {
  float: left;
}
.mine4 .huiy a .huiy2 {
  float: right;
  margin: 0 10px 0 0;
}
.huiy2 img {
  width: 16px;
  height: 16px;
  margin-top: 5px;
}
.mine4 .huiy3 {
  height: 100px;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
}
.mine4 .huiy3 ul {
  width: 100%;
  list-style: none;
  margin: 10px 10px 10px 5px;
  line-height: 16px;
}
.mine4 .huiy3 ul li {
  display: inline-block;
  margin-left: 5%;
}
.mine4 .huiy3 ul li img {
  width: 60px;
  height: 60px;
  border-radius: 25%;
}
.mine4 .huiy3 ul li span {
  display: block;
  height: 20px;
}
/*功能部分*/
.function1 {
  list-style: none;
}
.function1 li {
  height: 50px;
  line-height: 50px;
  border-top: 5px solid #fff;
  background-color: #e2e1e1;
}
.function1 .function1-li {
  border-top: none;
}
.function1 li a {
  text-decoration: none;
  color: #000;
  font-size: 18px;
}
.function1 li a .text {
  float: left;
  margin-left: 10px;
}
.function1 li a .text1 {
  float: right;
  margin-right: 20px;
}
.text1 img {
  width: 20px;
  height: 20px;
  margin-top: 15px;
}
</style>
